import React from "react";
import { Card } from "antd-mobile";
import "./index.less";

export function CardItem({
  label,
  value,
  className = "",
  showBorder = false,
  clickable = false,
  onClick,
  style = {},
}) {
  const handleClick = (e) => {
    if (clickable && onClick) {
      onClick(e);
    }
  };

  return (
    <div
      className={`cn-card-item ${showBorder ? "cn-card-item-border" : ""} ${
        clickable ? "cn-card-item-clickable" : ""
      } ${className}`}
      style={style}
      onClick={handleClick}
    >
      <div className="cn-card-item-label">{label}</div>
      <div className="cn-card-item-value">{value}</div>
    </div>
  );
}

export default function CardContainer({
  noCard = false,
  children,
  title,
  extra,
  footer,
  className = "",
  shadow = true,
  border = false,
  padding = "16px",
  margin = "0",
  backgroundColor = "white",
  borderRadius = "12px",
  hover = true,
  clickable = false,
  noDiver = false,
  onClick,
  style = {},
  ...rest
}) {
  // 构建样式类名
  const cardClassName = [
    "cn-card",
    shadow ? "cn-card-shadow" : "",
    border ? "cn-card-border" : "",
    hover ? "cn-card-hover" : "",
    clickable ? "cn-card-clickable" : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  // 构建内联样式
  const cardStyle = {
    padding,
    margin,
    backgroundColor,
    borderRadius,
    ...style,
  };

  // 处理点击事件
  const handleClick = (e) => {
    if (clickable && onClick) {
      onClick(e);
    }
  };

  return (
    <Card
      className={cardClassName}
      style={cardStyle}
      onClick={handleClick}
      {...rest}
    >
      {/* 卡片标题和扩展 */}
      {(title || extra) && (
        <div className="cn-card-header">
          {title && <div className="cn-card-title">{title}</div>}
          {extra && <div className="cn-card-extra">{extra}</div>}
        </div>
      )}

      {/* 卡片内容 */}
      {children && <div className="cn-card-content">{children}</div>}

      {/* 卡片底部 */}
      {footer && (
        <div
          className="cn-card-footer"
          style={{ textAlign: footer.textAlign || "right" }}
        >
          <div className="footer-text">
            <span className="footer-text-discount-label">总优惠:</span>
            <span className="footer-text-discount">{footer.discount}元</span>
            <span className="footer-text-real-label">实付款:</span>
            <span className="footer-text-real">{footer.realValue}元</span>
          </div>
        </div>
      )}
    </Card>
  );
}
